import React, {useEffect, useState} from "react"
import LoadableButton from "./LoadableButton";
import {CheckOutlined, CopyOutlined} from "@ant-design/icons";
import {useTheme} from "theming";
import {useToken} from "antd/es/theme/internal";
import {theme} from "antd";
import {tryWriteTextToClipboard} from "@zxy-cn/clipboard-utils";

export interface CopyButtonProps {
    value:string
}

const CopyButton: React.FC<CopyButtonProps> = ({value}) => {
    const [copied,setCopied] = useState(false)
    useEffect(() => {
        if (copied){
            setTimeout(() => {
                setCopied(false)
            }, 1000)
        }
    }, [copied]);
    let token = theme.useToken();
    return (
        <>
            <LoadableButton onClick={async event=> {
                event.stopPropagation()
                await tryWriteTextToClipboard(value)
                setCopied(true)
            }} type={"text"} icon={copied?<CheckOutlined style={{color:token.token.colorSuccess}}/>:<CopyOutlined/>}></LoadableButton>
        </>
    )
}

export default CopyButton
